<template>
  <section>
    <main>
      <div class="pink">学生报名</div>
    <div class="model">
      <div class="body">
        <div class="header"><span class="title">基本信息</span></div>
        <div class="content">
          <div class="left bigger">
            <span>学生姓名</span>
            <input type="text" class="text" v-model="studentName">
          </div>
          <div class="left bigger">
            <template>
              <span>性别</span>
              <el-radio class="radio" v-model="radio" label="1">男</el-radio>
              <el-radio class="radio" v-model="radio" label="2">女</el-radio>
            </template>
          </div>
          <div class="left">
            <span>出生日期</span>
            <input type="text" class="text" v-model="studentBirthday">
          </div>
          <div class="right">
            <span>身高</span>
            <input type="text" class="text" v-model="studentHeight">
          </div>
          <div class="left n_lhight">
            <span>身份证号或港澳证件号</span>
            <input type="text" class="text" v-model="studentIdNo">
          </div>
          <div class="right">
            <span>联系方式</span>
            <input type="text" class="text" >
          </div>
          <div class="left">
            <span>报读年级</span>
            <input type="text" class="text" v-model="signGrade">
          </div>
          <div class="right longer">
            <span>原就读幼儿园</span>
            <input type="text" class="text" v-model="baseSchool">
          </div>
          <div class="left">
            <span>户口性质</span>
            <input type="text" class="text" v-model="houseType">
          </div>
          <div class="right">
            <span>民族</span>
            <input type="text" class="text" v-model="nation">
          </div>
          <div class="left longer bigger">
            <span>家庭详细住址</span>
            <input type="text" class="text" v-model="familyAddr">
          </div>
          <div class="left">
            <span>父亲姓名</span>
            <input type="text" class="text" v-model="fatherName">
          </div>
          <div class="right">
            <span>父亲电话</span>
            <input type="text" class="text" v-model="fatherPhone">
          </div>
          <div class="left bigger">
            <span>父亲单位</span>
            <input type="text" class="text" v-model="fatherCompany">
          </div>
          <div class="left">
            <span>母亲姓名</span>
            <input type="text" class="text" v-model="motherName">
          </div>
          <div class="right">
            <span>母亲电话</span>
            <input type="text" class="text" v-model="motherPhone">
          </div>
          <div class="left bigger">
            <span>母亲单位</span>
            <input type="text" class="text" v-model="motherCompany">
          </div>
          <div class="bottom">
            <span>获奖奖项</span>
            <el-input type="textarea" v-model="awards"></el-input>
          </div>
          <div class="bottom">
            <span>工作特长</span>
            <el-input type="textarea" v-model="hobby"></el-input>
          </div>
          <!-- <div class="bottom">
            <span>故障描述</span>
            <el-form-item label="通知内容">
              <el-input type="textarea" v-model="form.situation"></el-input>
            </el-form-item>
          </div> -->
          <div class="address_list"></div>
          <div class="scent_btn">
            <button class="btn btn-danger" @click="subAll">提交</button>
          </div>
        </div>
      </div>
    </div>
    </main>
  </section>
</template>

<script>
export default {
  data () {
    return {
      radio: '1',
      studentName: null,
      studentSex: null,
      studentBirthday: null,
      studentHeight: null,
      studentIdNo: null,
      signGrade: null,
      baseSchool: null,
      houseType: null,
      nation: null,
      familyAddr: null,
      fatherName: null,
      fatherPhone: null,
      fatherCompany: null,
      motherName: null,
      motherPhone: null,
      motherCompany: null,
      awards: null,
      hobby: null,
      form: {},
      dialogImageUrl: null,
      dialogVisible: false
    }
  },
  methods: {
    subAll () {
      if (this.radio === '1') {
        this.studentSex = '男'
      } else if (this.radio === '2') {
        this.studentSex = '女'
      }
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'signup/studentMsg/add', {
        studentName: this.studentName,
        studentSex: this.studentSex,
        studentBirthday: this.studentBirthday,
        studentHeight: this.studentHeight,
        studentIdNo: this.studentIdNo,
        signGrade: this.signGrade,
        baseSchool: this.baseSchool,
        houseType: this.houseType,
        nation: this.nation,
        familyAddr: this.familyAddr,
        fatherName: this.fatherName,
        fatherPhone: this.fatherPhone,
        fatherCompany: this.fatherCompany,
        motherName: this.motherName,
        motherPhone: this.motherPhone,
        motherCompany: this.motherCompany,
        awards: this.awards,
        hobby: this.hobby
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          console.log(this.studentSex)
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-textarea__inner
  {
    position: relative; left: 9%; top: -32px;
    width: 80%;
  }
  .scent_btn
  {
    position: relative;
    height: 80px;
  }
  .scent_btn button
  {
    position: absolute; left: 38%; top: 20px;
  }
</style>
<style lang="less" scoped>
@import '/static/css/material-dashboard.css';
main
{
  position: relative;
  .pink{
      width: 104px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #E12C6C;
      border-radius: 4px;
      text-align: center;
      line-height: 70px;
      color: #fff;
      z-index: 2;
    }
  .model{
    width: 98%;
    background: #FFF;
    margin-left: 1%;
    margin-top: 60px;
    border-radius: 5px;
    padding-top: 10px;
    overflow: hidden;
    .header{
      width: 98%; height: 22px;
      border-bottom: 1px solid #ccc;
      padding: 30px 0 10px 0;
      margin-left: 0%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 13px 7px 0;
        margin-left: 0;
      }
    }
    .body{
      padding: 40px 0 10px 11%;
      span{
        margin-left: 4%;
        display: inline-block;
        width: 80px;
        text-align: right;
      }
      span:first-child{
        margin-left: 0;
      }
      label
      {
        margin-left: 4%;
      }
      .content{
        width: 100%;
        div[data-v-3b44cab2]
        {
          line-height: 50px;
        }
        .n_lhight
        {
          line-height: 20px !important;
        }
        .longer
        {
          position: relative; left: -15px;
          span
          {
            width: 96px;
          }
        }
        .left{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
        }
        .bigger
        {
          width: 100%;
        }
        .right{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
          margin-left: 28%;
        }
        .bottom{
          padding: 10px 0;
          .text{
            width: 68%;
          }
        }
        .text{
          border: 0;
          border-bottom: 1px solid #D7D7D7;
        }
      }
    }
  }
}
</style>
